<template>
    <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
    <button id='zoom'>Zoom to buildings</button>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"
import MapboxCommonService from "@/service/map/MapboxCommonService"

export default {
    name: "ChangeBuildStyle.component",
    components: {Mapbox},
    setup() {

        let mapStore = ref({});
        let mapOnLoadCB = (map) => {
            mapStore.value = map;
            MapboxCommonService.setCZBP(map, [-90.73414, 14.55524], 13)

            // 使用interpolate expression 缓入建筑图层并平滑地完成颜色变换。
            map.setPaintProperty('building', 'fill-color', [
                "interpolate",
                ["exponential", 0.5],
                ["zoom"],
                15,
                "#e2714b",
                22,
                "#eee695"
            ]);
            map.setPaintProperty('building', 'fill-opacity', [
                "interpolate",
                ["exponential", 0.5],
                ["zoom"],
                15,
                0,
                22,
                1
            ]);

            document.getElementById('zoom').addEventListener('click', () => {
                map.zoomTo(19, {duration: 9000});
            });
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped lang="scss">
#zoom {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 20%;
    height: 40px;
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #ee8a65;
    cursor: pointer;
}
</style>